<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8" />
    <title>User Login</title>
    <link rel="stylesheet" type="text/css" th:href="@{/login/css/normalize.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/login/css/htmleaf-demo.css}"/>
</head>
<body>
    <div class="htmleaf-container">
        <header class="htmleaf-header">
            <!--<h1><span>FYP Marking System </span></h1>-->
            <h1> Marking Assignment System </h1>

        </header>
        <div id="wrapper" class="login-page">
            <div id="login_form" class="form">
                <form class="register-form">

                    <input type="text" placeholder="用户名" id="r_user_name"/>
                    <input type="password" placeholder="密码" id="r_password"/>
                    <input type="text" placeholder="电子邮件" id="r_emial"/>
                    <button id="create">创建账户</button>
                    <p class="message">已经有了一个账户? <a href="#">立刻登录</a></p>
                </form>
                <form class="login-form" th:action="@{/teacher/signin}" method="post">
                    <label>Email</label>
                    <input type="email" placeholder="Email" name="email" id="email"/>
                    <label>Password</label>
                    <input type="password" placeholder="Password" name="password" id="password"/>
                    <button id="login">Sign in</button>
                    <!--<p class="message">还没有账户? <a href="#">立刻创建</a></p>-->
                </form>
            </div>
        </div>


    </div>

    <script th:src="@{/js/jquery-3.0.0.min.js}" type="text/javascript"></script>
    <script type="text/javascript">
        /*<![CDATA[*/
        $("#login").submit(function(){
            return check_login();
        })


        function check_login()
        {
            var email=$("#email").val();
            var pass=$("#password").val();
            if(email.length==0 || pass.length==0)
            {
                $("#login_form").removeClass('shake_effect');
                setTimeout(function()
                {
                    $("#login_form").addClass('shake_effect')
                },1);

                return false;
            }
            return true;


        }
        /*]]>*/
    </script>

</body>
</html>